<!--  -->
<template>
  <div class="a1">
    <div class="a2">
           <van-nav-bar
  title="标题"
  left-text="返回"

  left-arrow
  @click-left="onClickLeft"

/>
    </div>
    <div class="a3">
      <img src="../../assets/y1.jpg" alt="">
    </div>
    <div class="a4">
      <p class="a5">
        <span>
          老年人体检套餐豪华版（女）
        </span>
      </p>
      <div class="a6">
          <div>￥998</div>
         <div>已有Label人购买</div>
      </div>
    </div>
    <div class="a7">
      <van-tabs v-model="active">
        <van-tab title="图文详情">
          <ul>
            <li>
              <span>
                套餐介绍
              </span>
            </li>
            <li></li>
            <li>60岁以上的女性长者,为相关科室诊断提供重要依据</li>
            <li></li>
            <li class="g1">使用规则</li>
            <li>1、请至少提前一天预订</li>
            <li></li>
            <li>
              2、线上预约完成后,体检日拿到身份证到医院前台等级即可开始体检
            </li>
            <li></li>
            <li>3、医院提供营养早餐一份</li>
            <li></li>
            <li>4、体检者可或免费停车票</li>
          </ul>
        </van-tab>
        <van-tab title="体验项目">
          <table width="300" border="1" cellspacing="0" class="o1">
            <tr>
              <td class="q1">项目名称</td>
              <td>一般情况</td>
            </tr>
            <tr>
              <td>检查范围</td>
              <td>身高、体重、血压、脉搏</td>
            </tr>
            <tr>
              <td>检查意义</td>
              <td>了解身体一般状况</td>
            </tr>
          </table>

          <table width="300" border="1" cellspacing="0">
            <tr>
              <td>项目名称</td>
              <td>内科</td>
            </tr>
            <tr>
              <td>检查范围</td>
              <td></td>
            </tr>
            <tr>
              <td>检查意义</td>
              <td>胸部(心脏、双肺、胸腔)、腹部</td>
            </tr>
          </table>
        </van-tab>
      </van-tabs>
    </div>
    <footer>
      <p>
        <span>
          ￥998.0
           </span>
      </p>
      
      <p>
        <span @click="spank">
        购买预约
         </span>
      </p>
    </footer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 2,
    };
  },
 methods: {
    onClickLeft() {
      this.$router.push('./PayPage')
    },
    spank(){
    
      this.$router.push('./Physical')
    }
   
  },
  //   components: {},

  //   computed: {},

  //   mounted: {},

  //   methods: {}
};
</script>
<style lang="scss" scoped>
.a1 {
  width: 100%;
  height: 100%;

  position: fixed;
}
.a2 {
  height: 44px;
  background: hotpink;
  line-height: 44px;
  width: 100%;
  text-align: center;
 
}
.a3 {
  width: 100%;
  height: 134px;
  background: khaki;
  line-height: 134px;
}
.a3 img{
  width: 100%;
  height: 134px;
}
.a4 {
  width: 100%;
  height: 58px;
  background: aqua;

}

.a5 {
  width: 212px;
  height: 16px;
  border: 1px solid black;
  line-height: 16px;
  font-size: 14px;

}
.a6 {
  width: 100%;
  height: 16px;
  border: 1px solid black;
  display: flex;
  justify-content: space-between;
  line-height: 16px;
}
.q1 {
  width: 76px;
  height: 16px;
}

.a7 li {
  width: 100%;
  height: 17px;
  font-size: 12px;
}
.g1 {
  margin-bottom: 10px;
}
/deep/ .van-tabs__line {
  position: absolute;
  bottom: 15px;
  left: 0;
  z-index: 1;
  width: 187px;
  height: 3px;
  background-color: #ee0a24;
  border-radius: 3px;
}
.o1 {
  margin-bottom: 10px;
}
footer {
  width: 100%;
  height: 40px;

  position: fixed;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content:space-between;
}
footer p {
  width: 160px;
  height: 40px;
  border: 1px solid black;
  margin-top: -2px;
  text-align: center;
  line-height: 40px;
  font-size: 16px;
}
 footer p:nth-of-type(1){
    color: #FF6600;
  }
  footer p:nth-of-type(2){
    background: #FF6600;
  }
</style>
